<template>
	<view class="content">
		<view class="topbg">
			<view class="icon1"></view>
			<view class="ranktop">
				<view class="car1">
					<view class="rankinfo">
						<view class="infos">
							<image src="../../../static/logo.png" mode="aspectFit" class="icon3 color2"></image>
							<view class="txt3 bg2"> 2 </view>
						</view>
						<view class="txt1">
							会员昵称
						</view>
						<view class="txt4">
							99999.99 USDT
						</view>
					</view>
				</view>
				<view class="car2">
					<image src="../../../static/images/btn/noe.png" mode="aspectFit" class="icon2"></image>
					<view class="rankinfo">
						<view class="infos">
							<image src="../../../static/logo.png" mode="aspectFit" class="icon3 color1"></image>
							<view class="txt3 bg1"> 1 </view>
						</view>
						<view class="txt1" style="margin: 24rpx 0 8rpx;">
							会员昵称
						</view>
						<view class="txt2">
							99999.99 USDT
						</view>
					</view>
				</view>
				<view class="car3">
					<view class="rankinfo">
						<view class="infos">
							<image src="../../../static/logo.png" mode="aspectFit" class="icon3 color3"></image>
							<view class="txt3 bg3"> 3 </view>
						</view>
						<view class="txt1">
							会员昵称
						</view>
						<view class="txt4">
							99999.99 USDT
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="card-2">
			<view class="cleft">
				<view class="txt5">
					135549.23
				</view>
				<view class="txt6">
					今日量化收益USDT
				</view>
			</view>

			<view class="cleft">
				<view class="txt5">
					135549.23
				</view>
				<view class="txt6">
					总量化收益USDT
				</view>
			</view>
		</view>
		<view class="card-3">
			<view class="list-item">
				<view class="txt7">
					4
				</view>
				<view class="info-img">
					<image src="../../../static/logo.png" mode="aspectFit" class="icon4"></image>
					<view class="info-txt">
						<view class="txt8">
							用户昵称
						</view>
						<view class="txt9">
							今日 127623.23 丨 总 237642123.93
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="txt7">
					5
				</view>
				<view class="info-img">
					<image src="../../../static/logo.png" mode="aspectFit" class="icon4"></image>
					<view class="info-txt">
						<view class="txt8">
							用户昵称
						</view>
						<view class="txt9">
							今日 127623.23 丨 总 237642123.93
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="txt7">
					6
				</view>
				<view class="info-img">
					<image src="../../../static/logo.png" mode="aspectFit" class="icon4"></image>
					<view class="info-txt">
						<view class="txt8">
							用户昵称
						</view>
						<view class="txt9">
							今日 127623.23 丨 总 237642123.93
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="txt7">
					8
				</view>
				<view class="info-img">
					<image src="../../../static/logo.png" mode="aspectFit" class="icon4"></image>
					<view class="info-txt">
						<view class="txt8">
							用户昵称
						</view>
						<view class="txt9">
							今日 127623.23 丨 总 237642123.93
						</view>
					</view>
				</view>
			</view>
			<view class="list-item">
				<view class="txt7">
					8
				</view>
				<view class="info-img">
					<image src="../../../static/logo.png" mode="aspectFit" class="icon4"></image>
					<view class="info-txt">
						<view class="txt8">
							用户昵称
						</view>
						<view class="txt9">
							今日 127623.23 丨 总 237642123.93
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped>
	page {
		background: #F8F8F8;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: #F8F8F8;
	}

	.topbg {
		background: #2f73fd;
		height: 348rpx;
		width: 100%;
		position: relative;

	}

	.ranktop {
		display: flex;
		justify-content: center;
		margin-top: 180rpx;
	}

	.icon1 {
		width: 614rpx;
		height: 298rpx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		bottom: 0;
		background: url(../../../static/images/btn/phbg.png)center/cover no-repeat;
	}

	.car1 {
		width: 200rpx;
		height: 260rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(190, 190, 190, 0.5);
		border-radius: 16rpx;
		z-index: 10;
		margin: 44rpx 13rpx;
		position: relative;

	}

	.car2 {
		width: 240rpx;
		height: 320rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(190, 190, 190, 0.5);
		border-radius: 16rpx;
		z-index: 10;
		position: relative;
		margin: 0 20rpx;
	}

	.car3 {
		width: 200rpx;
		height: 260rpx;
		background: #FFFFFF;
		box-shadow: 0px 0px 8px 0px rgba(190, 190, 190, 0.5);
		border-radius: 16rpx;
		z-index: 10;
		margin: 44rpx 13rpx;
		position: relative;
	}

	.icon2 {
		height: 92rpx;
		width: 104rpx;
		margin: -60rpx auto 10rpx;
		display: flex;
	}

	.rankinfo {
		display: flex;
		justify-content: space-around;
		flex-direction: column;
		align-items: center;
		margin-top: 15px;
	}

	.icon3 {
		width: 100rpx;
		height: 100rpx;
		border-radius: 100%;
	}

	.txt1 {
		font-size: 26rpx;
		font-weight: 500;
		color: #222222;
		line-height: 36rpx;
		margin: 14rpx 0 8rpx;
	}

	.txt2 {
		font-size: 20rpx;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}

	.txt3 {
		border-radius: 100%;
		color: #fff;
		height: 40rpx;
		width: 40rpx;
		text-align: center;
		line-height: 40rpx;
		position: absolute;
		top: 100%;
		left: 50%;
		transform: translate(-50%, -80%);
	}

	.txt4 {
		font-size: 16rpx;
		font-weight: 400;
		color: #999999;
		line-height: 28rpx;
	}

	.infos {
		position: relative;
	}

	.color1 {
		border: 2px solid #FFDC4E;
	}

	.color2 {
		border: 2px solid #D4D4D6;
	}

	.color3 {
		border: 2px solid #F6B67B;
	}

	.bg1 {
		background-color: #FFDC4E;

	}

	.bg2 {
		background-color: #D4D4D6;
	}

	.bg3 {
		background-color: #F6B67B;
	}

	.txt5 {
		font-size: 28rpx;
		font-weight: 600;
		color: #000000;
		line-height: 40rpx;
	}

	.txt6 {
		font-size: 24rpx;
		font-weight: 400;
		color: #8B8B93;
		line-height: 34rpx;
	}

	.card-2 {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 200rpx;
		background: #fff;
		border-radius: 16rpx;
		width: 696rpx;
		padding: 28rpx 32rpx;
	}

	.card-3 {
		background: #fff;
		width: 696rpx;
		border-radius: 16rpx;
		margin: 22rpx auto;
	}

	.list-item {
		display: flex;
		margin: 18rpx;
		border-bottom: 1px solid #f8f8f8;
		padding: 14rpx 0px;
	}

	.icon4 {
		width: 78rpx;
		height: 78rpx;
		border-radius: 100%;
	}

	.txt7 {
		font-size: 36rpx;
		font-weight: 600;
		color: #999999;
		line-height: 50px;
		width: 86rpx
	}

	.info-img {
		display: flex;
		align-items: center;
	}

	.info-txt {
		margin-left: 20rpx;
	}

	.txt8 {
		font-size: 28rpx;
		font-weight: 600;
		color: #222222;
		line-height: 40rpx;
	}

	.txt9 {
		font-size: 22rpx;
		font-weight: 400;
		color: #999999;
		line-height: 32rpx;
	}
</style>
